<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div th:replace="header::common"></div>
    <style>
        .center {
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 3px;
        }
        .pagination {
            display: inline-block;
            padding-left: 0px;
            margin: 0px 0px;
            border-radius: 4px;
        }
        .table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 10px;
            margin-top: 3px;
        }
    </style>
</head>
<body class="center">
<a class="btn btn-sm btn-primary" href="/insure/toAdd">添加</a>
<a class="btn btn-sm btn-danger" onclick="deleteAll()">批量删除</a>
<table class="table table-striped table-bordered table-hover table-condensed">
    <tr class="success">
        <td><input type="checkbox" id="checkAll"/></td>
        <td>ID</td>
        <td>保险名称</td>
        <td>保险所属</td>
        <td>车牌</td>
        <td>投保时间</td>
        <td>年限</td>
        <td>保险金额</td>
        <td>操作</td>
    </tr>
    <tr th:each="insureVO:${pageInfo.list}">
        <td><input type="checkbox" th:value="${insureVO.id}" class="cb"/></td>
        <td th:text="${insureVO.id}"></td>
        <td th:text="${insureVO.name}"></td>
        <td th:text="${insureVO.typename}"></td>
        <td th:text="${insureVO.carid}"></td>
        <td th:text="${#dates.format(insureVO.start, 'yyyy-MM-dd hh:mm')}"></td>
        <td th:text="${insureVO.end}"></td>
        <td th:text="${insureVO.money}"></td>
        <td>
            <a class="btn btn-xs btn-danger" th:onclick="|deleteById(${insureVO.id})|">删除</a>
            <a class="btn btn-xs btn-primary" th:href="|/insure/toUpdate?id=${insureVO.id}|">编辑</a>
        </td>
    </tr>
</table>
<nav aria-label="Page navigation">
    <ul class="pagination pagination-sm">
        <!--上一页-->
        <th:block th:if="${pageInfo.pageNo==1}">
            <li class="disabled">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">上一页</span>
                </a>
            </li>
        </th:block>
        <th:block th:if="${pageInfo.pageNo!=1}">
            <li>
                <a th:href="|/insure/selectByPage?pageNo=${pageInfo.pageNo-1}|" aria-label="Previous">
                    <!--<span aria-hidden="true">&laquo;</span>-->
                    <span aria-hidden="true">上一页</span>
                </a>
            </li>
        </th:block>

        <li th:if="${pageInfo.totalPage>=1}" th:class="${pageInfo.pageNo==page}?active:''" th:each="page:${#numbers.sequence(1, pageInfo.totalPage)}">
            <!--<a th:href="|${pageInfo.pageNo==page?'#':'/insure/selectByPage?pageNo=${page}'}|" th:text="${page}"></a>-->
            <th:block th:if="${pageInfo.pageNo==page}">
                <a href="#" th:text="${page}"></a>
            </th:block>
            <th:block th:if="${pageInfo.pageNo!=page}">
                <a th:href="|/insure/selectByPage?pageNo=${page}|" th:text="${page}"></a>
            </th:block>
        </li>

        <!--下一页-->
        <th:block th:if="${pageInfo.pageNo==pageInfo.totalPage}">
            <li class="disabled">
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">下一页</span>
                </a>
            </li>
        </th:block>
        <th:block th:if="${pageInfo.pageNo!=pageInfo.totalPage}">
            <li>
                <a th:href="|/insure/selectByPage?pageNo=${pageInfo.pageNo+1}|" aria-label="Next">
                    <!-- <span aria-hidden="true">&raquo;</span>-->
                    <span aria-hidden="true">下一页</span>
                </a>
            </li>
        </th:block>
    </ul>
</nav>

<script>
    $(function (){//页面加载完了之后执行function里面代码
        $('#checkAll').click(function (){
            $('.cb').prop('checked', this.checked);
        });
    });

    function showBlogContent(content) {
        layer.open({
            type: 1,
            area: ['1000px', '450px'],
            content: content
        })
    }

    function deleteAll() {
        layer.confirm('您确认要删除么?', function() {
            let array = new Array();
            //$('.cb:checked')找到加了class="cb"而且是勾选状态的
            $('.cb:checked').each(function() {
                //遍历每个勾选的checkbox，拿到里面的value值，放到array数组里面
                array.push($(this).val());
            })
            console.log(array);
            if (array.length == 0) {
                mylayer.errorMsg('至少要选择一个');
                return;
            }
            location.href = '/insure/deleteAll?ids=' + array;
        });
    }

    function deleteById(id) {
        layer.confirm('您确认要删除么?', function() {
            location.href = '/insure/deleteById?id=' + id;
        });

        //在js里面单引号和双引号没有区别
        /*let isDelete = window.confirm('您确认要删除么?');
        if (isDelete) {
            location.href = '/insure/deleteById?id=' + id;
        }*/
    }
</script>
</body>
</html>